<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相册</title>
<style type="text/css">
	
body{
    background-image: url(img/g1.jpg);  /* -----------------------*/
	background-size: 100% 100%;
    perspective: 5000px;
	
    }
.show{
	perspective: 5000px;
    -webkit-transform: rotateX(-45deg);
    -moz-transform: rotateX(-45deg);
    transform: rotateX(-45deg);
    transform-style: preserve-3d;
  
    }
.box{
    background-image: url(img/g7.png); /* ------------------------*/
    background-size: 150px 250px;
    position: relative;
	width: 150px;
	height: 250px;
	border: 1px solid #ccc;
    margin: 300px auto;
    transform-style: preserve-3d;
    -webkit-animation: rotate1 10s linear infinite;
    -moz-animation: rotate1 10s linear infinite;
    animation: rotate1 10s linear infinite;
  
     }
.box img{
	width: 150px;
	height: 250px;
	border: 1px solid #ccc;
	position: absolute;
    left: 0;top: 0;
    -webkit-box-reflect: below 20px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,0) 30%,rgba(250,250,250,0.5));
  
      }
  
 .img1{
       -webkit-transform: translateZ(300px);
       -moz-transform: translateZ(300px);
       transform: translateZ(300px);
       }
  
 .img2{
       -webkit-transform:rotateY(36deg) translateZ(300px) ;
       -moz-transform:rotateY(36deg) translateZ(300px) ;
       transform:rotateY(36deg) translateZ(300px) ;
       }
  .img3{
       -webkit-transform:rotateY(72deg) translateZ(300px);
       -moz-transform:rotateY(72deg)g) translateZ(300px) ;
       transform:rotateY(72deg) (300px) ;
                }
   .img4{
        -webkit-transform: rotateY(108deg) translateZ(300px);
        -moz-transform:rotateY(108deg) translateZ(300px) ;
       transform:rotateY(108deg) translateZ(300px) ;
          }
  
  .img5{
        -webkit-transform: rotateY(144deg) translateZ(300px);
        -moz-transform:rotateY(144deg) translateZ(300px) ;
        transform:rotateY(144deg) translateZ(300px) ;
                }
 .img6{
       -webkit-transform:rotateY(180deg) translateZ(300px) ;
       -moz-transform:rotateY(180deg) translateZ(300px) ;
       transform:rotateY(180deg) translateZ(300px) ;
                }
  
 .img7{
     -webkit-transform:rotateY(216deg) translateZ(300px) ;
     -moz-transform:rotateY(216deg) translateZ(300px) ;
     transform: rotateY(216deg) translateZ(300px);
                }
  
 .img8{
      -webkit-transform:rotateY(252deg) translateZ(300px) ;
      -moz-transform:rotateY(252deg) translateZ(300px) ;
      transform:rotateY(252deg) translateZ(300px) ;
            }
  
 .img9{
          -webkit-transform:rotateY(288deg) translateZ(300px) ;
          -moz-transform:rotateY(288deg) translateZ(300px) ;
          transform:rotateY(288deg) translateZ(300px) ;
              }
  
.img10{
         -webkit-transform:rotateY(324deg) translateZ(300px) ;
         -moz-transform:rotateY(324deg) translateZ(300px) ;
         transform:rotateY(324deg) translateZ(300px) ;
                }                
  
  
@-moz-keyframes rotate1{
      0%{
         -webkit-transform: rotateY(0deg);
         -moz-transform: rotateY(0deg);
         transform: rotateY(0deg);
        }
    100%{
        -webkit-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
        transform: rotateY(360deg);
                     }
                }
 @-webkit-keyframes rotate1{
     0%{
      -webkit-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
       transform: rotateY(0deg);
       }
    100%{
        -webkit-transform: rotateY(360deg);
        -moz-transform: rotateY(360deg);
        transform: rotateY(360deg);
         }
      }
</style>
</head>
<body>
<div class="show">
                <div class="box">
                  <img src="img/g1.jpg" class="img1"/>
                  <img src="img/g2.jpg" class="img2"/>
                  <img src="img/g3.jpg" class="img3" />
                  <img src="img/g4.jpg" class="img4" />
                  <img src="img/g5.jpg" class="img5"/>
                  <img src="img/g6.jpg" class="img6"/>
                  <img src="img/g7.png" class="img7" />
                  <img src="img/g8.png" class="img8" />
                  <img src="img/g9.png" class="img9" />
                  <img src="img/g10.png" class="img10" />
                  <img src="img/g5.jpg" class="img10" />
                </div>
      </div>

</body>

</html>
